import styles from './index.css';
import SWR from 'swr';
import fetch from 'isomorphic-unfetch'
import { F2 } from 'ant-design-mobile-chart';
import { useEffect } from 'react';
import Rs from '../hook/rs';

export default function () {
  const { data } = SWR('/api/user', async (rs) => {
    const r = await fetch(rs);
    return await r.json();
  })

  const rsz = Rs();
  console.log(rsz);
  useEffect(() => {
    console.log(data);
    const datas = [{
      year: '1951 年',
      sales: 38
    }, {
      year: '1952 年',
      sales: 52
    }, {
      year: '1956 年',
      sales: 61
    }, {
      year: '1957 年',
      sales: 145
    }, {
      year: '1958 年',
      sales: 48
    }, {
      year: '1959 年',
      sales: 38
    }, {
      year: '1960 年',
      sales: 38
    }, {
      year: '1962 年',
      sales: 38
    }];
    const chart = new F2.Chart({
      id: 'container',
      pixelRatio: window.devicePixelRatio
    });

    chart.source(datas, {
      sales: {
        tickCount: 5
      }
    });
    chart.tooltip({
      showItemMarker: false,
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = null;
        items[0].name = items[0].title;
        items[0].value = '¥ ' + items[0].value;
      }
    });
    chart.interval().position('year*sales');
    chart.render();
  }, [data])
  return (
    <div className={styles.normal}>
      <div className={styles.welcome} />
      <ul className={styles.list}>
        <li>To get started, edit <code>src/pages/index.js</code> and save to reload.</li>
        <li>
          <a href="https://umijs.org/guide/getting-started.html">
            Getting Started
          </a>
        </li>
      </ul>
      <canvas id="container"></canvas>
    </div>
  );
}
